<template>

  <!-- <div style="padding-bottom: 20px;"><span style=" font-size: 25px;font-weight: bold; ">列表</span></div> -->

  <div class="container">
    <el-tabs v-model="activeName" class="el-tabs" type="card" @tab-click="tabChange">
      <el-tab-pane name="dubRoleList">
        <template #label>
          <span class="tabs-label">
            <span>发现</span>
          </span>
        </template>
        <div class="user-list">
          <div class="user-item" v-for="(user, index) in roleList" :key="index">
            <img :src="user.head" :fit="scale - down" />
            <div class="user-info">
              <div><span class="user-name">{{ user.roleName }}</span> </div>
              <el-row :gutter="20" class="el-row" style="height: 100% ; line-height: 100%;">
                <el-col :span="3">{{ user.nick }}</el-col>
                <el-col :span="1"> <el-icon>
                    <Clock />
                  </el-icon>
                </el-col>

                <el-col :span="5">{{ user.createTimeFormat }}</el-col>
              </el-row>
              <el-row :gutter="20" class="el-row" style="height: 100% ; line-height: 100%;">
                <el-col :span="11"> <el-button type="primary" size="large"  @click="getTextToSpeech(user)" plain>使用声音</el-button>
                </el-col>
                <el-col :span="4" style=" display: flex;
  align-items: center;">
                  <PlayNewCs ref="rolePlayRef" :src="user.soundUrl">
                    <el-button type="primary" @click="play(index,1)" plain> 
                      播放示例
                    </el-button>
                  </PlayNewCs>
                </el-col>
                <el-col :span="3" style=" display: flex;
  align-items: center;"><el-text type="info">{{ user.useCount }}人使用</el-text> </el-col>
                <el-col :span="2" style=" display: flex;
  align-items: center;">
                    <el-button v-if="user.isCollect==0" type="primary" @click="collect(user.id)" plain> 
                      收藏
                    </el-button>
                    <el-button v-if="user.isCollect==1" type="primary" @click="collect(user.id)" > 
                      取消收藏
                    </el-button>
                    <el-text type="info">{{ user.useCount }}</el-text>


                </el-col>

              </el-row>


            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="dubCollectList">
        <template #label>
          <span class="tabs-label">
            <span>我的收藏</span>
          </span>
        </template>
        <div class="user-list">
          <div class="user-item" v-for="(user, index) in collectList" :key="index">
            <img :src="user.head" :fit="scale - down" />
            <div class="user-info">
              <div><span class="user-name">{{ user.roleName }}</span> </div>
              <el-row :gutter="20" class="el-row" style="height: 100% ; line-height: 100%;">
                <el-col :span="3">{{ user.nick }}</el-col>
                <el-col :span="1"> <el-icon>
                    <Clock />
                  </el-icon>
                </el-col>

                <el-col :span="5">{{ user.createTimeFormat }}</el-col>
              </el-row>
              <el-row :gutter="20" class="el-row" style="height: 100% ; line-height: 100%;">
                <el-col :span="11"> <el-button type="primary" size="large"  @click="getTextToSpeech(index)" plain>使用声音</el-button>
                </el-col>
                <el-col :span="4" style=" display: flex;
  align-items: center;">
                  <PlayNewCs ref="collectPlayRef" :src="user.soundUrl">
                    <el-button type="primary" @click="play(index,2)" plain> 
                      播放示例
                    </el-button>
                  </PlayNewCs>
                </el-col>
                <el-col :span="3" style=" display: flex;
  align-items: center;"><el-text type="info">{{ user.useCount }}人使用</el-text> </el-col>
                <el-col :span="2" style=" display: flex;
  align-items: center;">
                    <el-button  type="primary" @click="collect(user.id)" plain> 
                      取消收藏
                    </el-button>
                    <el-text type="info">{{ user.useCount }}</el-text>


                </el-col>

              </el-row>


            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="dubUserRoleList">
        <template #label>
          <span class="tabs-label">
            <span>我的声音</span>
          </span>
        </template>
        <div class="user-list">
          <div class="user-item" v-for="(user, index) in userList" :key="index">
            <img :src="user.head" :fit="scale - down" />
            <div class="user-info">
              <div><span class="user-name">{{ user.roleName }}</span> </div>
              <el-row :gutter="20" class="el-row" style="height: 100% ; line-height: 100%;">
                <el-col :span="3">{{ user.nick }}</el-col>
                <el-col :span="1"> <el-icon>
                    <Clock />
                  </el-icon>
                </el-col>

                <el-col :span="5">{{ user.createTimeFormat }}</el-col>
              </el-row>
              <el-row :gutter="20" class="el-row" style="height: 100% ; line-height: 100%;">
                <el-col :span="11"> <el-button type="primary" size="large"  @click="getTextToSpeech(user)" plain>使用声音</el-button>
                </el-col>
                <el-col :span="4" style=" display: flex;
  align-items: center;">
                  <PlayNewCs ref="rolePlayRef" :src="user.soundUrl">
                    <el-button type="primary" @click="play(index,1)" plain> 
                      播放示例
                    </el-button>
                  </PlayNewCs>
                </el-col>
                <el-col :span="3" style=" display: flex;
  align-items: center;"><el-text type="info">{{ user.useCount }}人使用</el-text> </el-col>
                <el-col :span="2" style=" display: flex;
  align-items: center;">
                    <el-button  type="primary" @click="del(user.id)" plain> 
                      删除
                    </el-button>
               
 

                </el-col>

              </el-row>


            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>


  </div>

</template>
<script setup>
import PlayNewCs from '@/components/PlayNewCs.vue';
import Vrouter from "@/router";
import { ref } from 'vue';
import request from '../request';
 
const rolePlayRef = ref(null);
const collectPlayRef = ref(null);
const userPlayRef = ref(null);


const roleList = ref([  ])
const collectList=ref([])
const userList=ref([])

const activeName = ref('dubRoleList')

//初始化先加载 发现声音列表
dubRoleList();

//播放声音
function play(index,type) {
  if(type==1){
    //  //  //暂停其他的
    for (let i = 0; i < rolePlayRef.value.length; i++) {
      if (i != index) {
        rolePlayRef.value[i].pause();

      }
    }
    rolePlayRef.value[index].playAudio();
  }
  if(type==2){
    //  //  //暂停其他的
    for (let i = 0; i < collectPlayRef.value.length; i++) {
      if (i != index) {
        collectPlayRef.value[i].pause();

      }
    }
    collectPlayRef.value[index].playAudio();
  }
  if(type==3){
    //  //  //暂停其他的
    for (let i = 0; i < userPlayRef.value.length; i++) {
      if (i != index) {
        userPlayRef.value[i].pause();

      }
    }
    userPlayRef.value[index].playAudio();
  }

}
//发现声音列表
function dubRoleList() {
  roleList.value = [];

  request.post('app/dubRole/dubRoleList ', {})
    .then(function (data) {
      //成功

      data.forEach(element => {
        let role = {
          id:element.id,
          head: process.env.VUE_APP_URL + element.head,
          roleName: element.roleName,
          useCount: element.useCount,
          soundUrl: process.env.VUE_APP_URL + element.soundUrl,
          roleId: element.id,
          nick: element.nick,
          createTimeFormat: element.createTimeFormat,
          isCollect:element.isCollect
        }
        roleList.value.push(role);
      });



    })
    .catch(function (error) { // 请求失败处理
      console.log(error);
    });
}

//我的收藏列表
function dubCollectList() {
  collectList.value = [];

  request.post('app/userDubCollect/dubCollectList ', {})
    .then(function (data) {
      //成功

      data.forEach(element => {
        let role = {
          id:element.id,
          head: process.env.VUE_APP_URL + element.head,
          roleName: element.roleName,
          useCount: element.useCount,
          soundUrl: process.env.VUE_APP_URL + element.soundUrl,
          roleId: element.id,
          nick: element.nick,
          createTimeFormat: element.createTimeFormat
        }
        collectList.value.push(role);
      });

 

    })
    .catch(function (error) { // 请求失败处理
      console.log(error);
    });
}
//我的声音列表
function dubUserRoleList() {
  userList.value = [];

  request.post('app/dubRole/dubUserRoleList ', {})
    .then(function (data) {
      //成功

      data.forEach(element => {
        let role = {
          id:element.id,
          head: process.env.VUE_APP_URL + element.head,
          roleName: element.roleName,
          useCount: element.useCount,
          soundUrl: process.env.VUE_APP_URL + element.soundUrl,
          roleId: element.id,
          nick: element.nick,
          createTimeFormat: element.createTimeFormat
        }
        userList.value.push(role);
      });


 
    })
    .catch(function (error) { // 请求失败处理
      console.log(error);
    });
}

function getTextToSpeech(data) {
   let user = data.value;
   console.log(user);

  Vrouter.push({
    path: "/textToSpeech", query: {
      head: data.head,
      roleName: data.roleName,
      useCount: data.useCount,
      soundUrl: data.soundUrl,
      roleId: data.roleId
    }
  });


}
function tabChange(tab) {

  console.log(tab.paneName);
  let paneName = tab.paneName;
  if (paneName == "dubRoleList") {
    dubRoleList();
  }

  if (paneName == "dubCollectList") {
    dubCollectList();
  }

  if (paneName == "dubUserRoleList") {
    dubUserRoleList();
  }


}
//收藏/取消收藏
function  collect(roleId){
  request.post('app/userDubCollect/collect?roleId='+roleId, {})
    .then(function () {
      //成功
      dubCollectList();
      dubRoleList();
    })
    .catch(function (error) { // 请求失败处理
      console.log(error);
    })
}

function del(roleId){
  request.post('app/dubRole/delete/'+roleId)
    .then(function () {
      //成功
      dubUserRoleList();
    })
    .catch(function (error) { // 请求失败处理
      console.log(error);
    })

}
</script>
<style scoped>
.container {
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  /* 如果需要换行，可以设置为wrap */
}

.user-list {
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-items: flex-start;
}

.user-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--el-border-color);
  border-radius: 2px;
  padding: 10px;


}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;


}

.el-row {
  width: 100%;

}

.user-name {
  font-size: 18px;
  font-weight: bold;
}

.metrics {
  display: flex;
  gap: 16px;
  color: #999;
}

.user-item img {
  width: 130px;
  /* 你可以根据需要调整宽度 */
  height: 130px;
  /* 保持图像的纵横比 */
  border-radius: 10px;
  /* 圆角半径，可以根据需要调整 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 可选：添加阴影以增强效果 */
}
</style>
<style>
.el-tabs {
  width: 100%;
  height: 100%;
}

.tabs-label {
  font-size: 20px;
}
</style>